<template>
  <div class="breed-page">
    <div class="page-header">
      <h1>宠物品种专区</h1>
      <div class="filter-tabs"> <!-- 筛选标签 -->
        <button 
          :class="['tab-btn', selectedPet === 'all' ? 'active' : '']"
          @click="selectedPet = 'all'"
        >
          全部品种
        </button>
        <button 
          :class="['tab-btn', selectedPet === 'cat' ? 'active' : '']"
          @click="selectedPet = 'cat'"
        >
          猫咪品种
        </button>
        <button 
          :class="['tab-btn', selectedPet === 'dog' ? 'active' : '']"
          @click="selectedPet = 'dog'"
        >
          狗狗品种
        </button>
      </div>
    </div>
     <!-- 品种展示网格 -->
    <div class="breed-grid">
       <!-- 循环展示过滤后的产品 -->
      <div v-for="product in filteredProducts" :key="product.id" class="breed-card">
        <div class="breed-image">
          <!-- 显示产品图片 -->
          <img :src="product.image" :alt="product.name">
          <!-- 如果产品有子分类，显示徽章 -->
          <div class="breed-badge" v-if="product.subCategory">
            {{ getBreedLabel(product.subCategory) }}
          </div>
        </div>
         <!-- 品种信息 -->
        <div class="breed-info">
          <!-- 品种名称 -->
          <h3>{{ product.name }}</h3>
          <!-- 品种描述 -->
          <p class="description">{{ product.description }}</p>
           <!-- 价格和操作区域 -->
          <div class="price-action">
           <!-- 品种价格 --> 
            <span class="price">¥{{ product.price }}</span>
            <!-- 联系卖家按钮 -->
            <button class="contact-btn" @click="contactBreeder(product)">
              联系卖家
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系卖家弹窗 -->
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <h2>联系卖家</h2>
        <p>品种：{{ selectedBreed ? selectedBreed.name : '' }}</p>
        <p>价格：¥{{ selectedBreed ? selectedBreed.price : '' }}</p>
        <div class="contact-info">
          <p>卖家电话：188-8888-8888</p>
          <p>卖家微信：pet_seller_888</p>
        </div>
        <div class="modal-actions">
          <button class="close-btn" @click="showModal = false">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import products from '../products'

export default {
  name: 'Breed',
  setup() {
    // 定义选中的宠物类型，默认为全部
    const selectedPet = ref('all')
     // 模拟产品数据
    const showModal = ref(false)
    const selectedBreed = ref(null)
    // 计算过滤后的产品
    const filteredProducts = computed(() => {
      let filtered = products.filter(p => p.productType === 'breed')
      
      if (selectedPet.value !== 'all') {
        filtered = filtered.filter(p => p.petType === selectedPet.value)
      }
      
      return filtered
    })
     // 获取品种徽章标签
    const getBreedLabel = (subCategory) => {
      const labels = {
        'purebred': '纯种'
        // 可以添加更多的子分类标签
      }
      return labels[subCategory] || subCategory
    }
    // 联系卖家的方法
    const contactBreeder = (product) => {
      selectedBreed.value = product
      showModal.value = true
    }

    return {
      selectedPet,
      filteredProducts,
      getBreedLabel,
      showModal,
      selectedBreed,
      contactBreeder
    }
  }
}
</script>

<style scoped>
.breed-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 20px;
}

.filter-tabs {
  display: flex;/* 筛选标签水平居中 */
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: #4CAF50;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.1em;
}

.tab-btn:hover {
  background: #45a049;
}

.tab-btn.active {
  background: #357a38;
}

.breed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.breed-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 品种卡片阴影 */
  overflow: hidden; /* 品种卡片溢出隐藏 */
  transition: transform 0.3s ease;/* 品种卡片过渡效果 */
}

.breed-card:hover {
  transform: translateY(-5px);
}

.breed-image {
  position: relative;/* 品种图片定位 */
  height: 250px;
  overflow: hidden; /* 品种图片溢出隐藏 */
}

.breed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 品种图片适应方式 */
}

.breed-badge {
  position: absolute;/* 品种徽章定位 */
  top: 10px;
  right: 10px;
  background: #4CAF50;
  color: white;
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 0.9em;
}

.breed-info {
  padding: 25px;
}

.breed-info h3 {
  margin: 0 0 15px 0;
  font-size: 1.4em;
  color: #333;
}

.description {
  color: #666;
  font-size: 1em;
  margin-bottom: 20px;
  line-height: 1.5;
}

.price-action {
  display: flex; /* 价格和操作区域布局 */
  justify-content: space-between; /* 价格和操作区域两端对齐 */
  align-items: center;/* 价格和操作区域垂直居中 */
}

.price {
  font-size: 1.5em;
  font-weight: bold;
  color: #4CAF50;
}

.contact-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1em;
}
/* 联系卖家按钮悬停时的背景颜色 */
.contact-btn:hover {
  background: #45a049;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 弹窗层级 */
}

.modal-content {
  background: white; /* 弹窗内容背景颜色 */
  padding: 30px;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
}

.modal-content h2 {
  margin: 0 0 20px 0;
  color: #333; /* 弹窗标题颜色 */
}

.contact-info {
  background: #f5f5f5; /* 联系信息背景颜色 */
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
}

.contact-info p {
  margin: 10px 0;
  color: #666;
}

.modal-actions {
  text-align: right;
  margin-top: 20px;
}

.close-btn {
  background: #666;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background: #555;
}

@media (max-width: 768px) {
  .breed-grid { /* 小屏幕下品种展示网格列模板 */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .filter-tabs { /* 小屏幕下筛选标签换行 */
    flex-wrap: wrap;
  }

  .tab-btn {
     /* 小屏幕下按钮弹性布局 */
    flex: 1 1 calc(33.333% - 10px);
    min-width: 120px;
  }

  .modal-content {
    width: 95%;
    padding: 20px;
  }
}
</style>